<template>
    <div class="page-component__scroll">
        <header :class='{"masthead":indexO == 1, "mastheadA":indexO == 2}'>
            <nav class="masthead-nav">
                <!-- 导航栏logo -->
                <div class="logo">
                  <div :class='{"logo-a":indexO == 1,"logo-aA":indexO == 2}'>

                  </div>
                    <!-- <a href="#"> -->
                        <!-- <img src="~@/assets/websit/img/logo.png"> -->
                    <!-- </a> -->
                </div>
                <!-- 导航栏选项 -->
                <div :class='{"nav":indexO == 1,"navA":indexO == 2}'>
                    <ul>
                        <li><a @click="changeActiveName('index')" :class="activeName === 'index'? 'current':''"><span>首页</span></a></li>
                        <li><a @click="changeActiveName('product')" :class="activeName === 'product'? 'current':''"><span>产品介绍</span></a></li>
                        <li><a @click="changeActiveName('company')" :class="activeName === 'company'? 'current':''"><span>关于我们</span></a></li>
                    </ul>
                    <div class="but">
                        <button type="button" @click="doLogin()">登录</button>
                        <button type="button" @click="doRegister()">注册</button>
                    </div>
                </div>
            </nav>
        </header>
        <company v-if="activeName === 'company'"></company>
        <product v-else-if="activeName === 'product'"></product>
        <index-body v-else></index-body>
        <div class="footer">
            <div class="footer_wrap">
                <div class="w1000">
                    <div style="overflow:hidden;width:1200px;margin:0 auto;">
                        <div class="foot_left foot_left2">
                            <h3 class="tit">友情链接</h3>
                            <p><a href="http://www.zjjsce.cn/" target="_blank" rel="nofollow">浙江省建设领域专业技术人员继续教育平台</a><br>
                            </p>
                        </div>

                        <div class="foot_left foot_left3">
                            <h3 class="tit">联系方式</h3>
                            <p>单位名称：杭州虹合科技有限公司</p>
                            <p>杭州市拱墅区联龙创鑫空间C座6层</p>
                            <p>技术支持电话：<span class="phone">13738041278</span></p>
                        </div>

                        <div class="foot_left foot_left1">
                            <h3 class="tit">快速链接</h3>
                            <p>
                                <a @click="changeActiveName('product')" rel="nofollow">产品介绍</a>
                                <a @click="changeActiveName('company')" target="_parent" rel="nofollow">关于我们</a>
                            </p>
                        </div>

                    </div>
                    <div class="footer-b">
                        <p> Copyright 2019-2021 青牛证书智能管控系统
                            <br>ICP备案：<a target="_blank" class="ablank" href="http://www.beian.miit.gov.cn/">浙ICP备19050189-1</a>
                            <!-- <div class="div-you">
                              <script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1279229344&web_id=1279229344"></script>
                            </div> -->
                        </p>
                    </div>
                </div>
            </div>
        </div>


        <div class="div-erweima"></div>

        <!-- 二维码 -->
        <!-- <div :class='{"zhengshuerwei":indexO == 1,"zhengshuerweiA":indexO == 2}'>

        </div>

        <div
        @mouseover="mouseOver"
        @mouseleave="mouseLeave"
       :class='{"div-ioooooo":indexO == 2,"div-iooooooA":indexO == 1}'
       >
        </div>
        <div id="myBtn" @click="topFunction()">
        </div> -->
    </div>
</template>
<script>
    import '@/assets/websit/css/index.css'
    import '@/assets/websit/css/nav.css'
    import IndexBody from './index-body'
    import Product from './product'
    import Company from './company'
    export default {
      // var vm = {
      data () {
        return {
          activeName: 'index',
          indexO: 1
        }
      },
      mounted () {
        window.addEventListener('scroll', this.windowScroll)
      },
      destroyed () {
	      window.addEventListener('scroll', this.windowScroll)
      },
      components: {
        IndexBody, Product, Company
      },
      methods: {
        mouseOver () {
          if (this.indexO == 1) {
            console.log(document.getElementsByClassName('zhengshuerwei'))
            document.getElementsByClassName('zhengshuerwei')[0].style.display = 'block'
          } else {
            console.log(document.getElementsByClassName('zhengshuerweiA'))

            document.getElementsByClassName('zhengshuerweiA')[0].style.display = 'block'
          }
        },
        mouseLeave () {
          if (this.indexO == 1) {
            document.getElementsByClassName('zhengshuerwei')[0].style.display = 'none'
          } else {
            document.getElementsByClassName('zhengshuerweiA')[0].style.display = 'none'
          }
        },
        windowScroll () {
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          if (scrollTop > 20) {
            this.indexO = 2
          } else {
            this.indexO = 1
          }
            //  let dom = document.querySelector(".dom").offsetTop;
        },
        changeActiveName (activeName) {
          this.activeName = activeName
        },
        doRegister () {
          let logistics = this.$router.resolve({
            path: '/login',
            query: {
              activeName: 'register'
            }
          })
          window.open(logistics.href, '_blank', '')
        },
        doLogin () {
          let logistics = this.$router.resolve({
            path: '/login',
            query: {
              activeName: 'login'
            }
          })
          window.open(logistics.href, '_blank', '')
        },
            // 点击按钮，返回顶部
        topFunction () {
          document.body.scrollTop = 0
          document.documentElement.scrollTop = 0
        }
      }
    // }
    }

    // 当网页向下滑动 20px 出现"返回顶部" 按钮
    window.onscroll = function () { scrollFunction() }

function scrollFunction () {
      if (document.getElementById('myBtn')) {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          document.getElementById('myBtn').style.display = 'block'
        } else {
          document.getElementById('myBtn').style.display = 'none'
        }
      }
    }
</script>
<style lang="scss">
.mastheadA{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: rgb(255,255,255);
}
.ablank{
  color: #ffffff;
}
.logo{
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-a{
  width: 179px;
  height: 44.5px;
  background: url(~@/assets/websit/img/logo.png);
  background-size: 100% 100%;
}
.logo-aA{
  width: 179px;
  height: 44.5px;
  background: url(~@/assets/websit/img/logo-a.png);
  background-size: 100% 100%;
}
.navA{
  float: left;
  margin-left: 180px;
  display: block;
  overflow: hidden;
  font-weight: 700;
}
.navA ul{
  float: left;
  font-size: 18px;
  /* font-weight: bold; */
  margin: 0;
  padding: 0;
  margin-left: 60px;
  display: block;
  line-height: 60px;
  font-weight: 700;

}
.navA ul li{
  list-style-type: none;
  display:inline-block;
  margin-left: 60px;
  // box-sizing: border-box;
  height: 60px;
  font-weight: 700;

}
.navA li a span:last-child{
  color: #333333;
  font-size: 16px;
  font-weight: 700;

}
.navA li a:link{
  color: #333333;
  font-weight: 700;

}
.navA li a:visited{
  color: #333333;
  font-weight: 700;

}
.navA li a:hover,
.navA li a.current{
  height: 40px;
  /* border-bottom: 2px solid #0b97ee; */
  width: 100%;
  // box-sizing: border-box;

  color: #0b97ee;
  font-weight: 700;

  // font-weight: 700 !important;
}
.navA li a:hover span:last-child,
.navA li a.current span:last-child{
  color: #0b97ee;
  // font-weight: 700;
  font-weight: 700;
  // box-sizing: border-box;


}
.navA li a{
  display: inline-block;
  text-align: center;
  font-size: 16px;
  font-weight: 700;

  text-decoration: none;
}
.navA li a span{
  display: block;
  height: 30px;
  line-height: 40px;
  font-weight: 700;

  /* font-weight: 700; */

}
.zhengshuerwei{
  width: 130px;
  height: 130px;
  background: url(~@/assets/websit/img/zhengshuerweima.png);
  background-size: 100% 100%;
  position: fixed;
  bottom: 5px;
  right: 125px;
  display: none;
}
.zhengshuerweiA{
  width: 130px;
  height: 130px;
  background: url(~@/assets/websit/img/zhengshuerweima.png);
  background-size: 100% 100%;
  position: fixed;
  bottom: 65px;
  right: 125px;
  display: none;
}
.div-ioooooo{
  width: 50px;
  height: 50px;
  // background-color: aqua;
  position: fixed;
  right: 70px;
  bottom: 135px;
  background: url(~@/assets/websit/img/erweima.png);
  background-size: 100% 100%;
}
.div-iooooooA{
  width: 50px;
  height: 50px;
  // background-color: aqua;
  position: fixed;
  right: 70px;
  bottom: 80px;
  background: url(~@/assets/websit/img/erweima.png);
  background-size: 100% 100%;
}
.div-you{
  width: 50px;
  height: 50px;
}
    #myBtn {
        width: 50px;
        height: 50px;
        display: none; /* 默认隐藏 */
        position: fixed;
        bottom: 80px;
        right: 70px;
        z-index: 99;
        border: none;
        outline: none;
        // background-color: red; /* 设置背景颜色，你可以设置自己想要的颜色或图片 */
        color: white; /* 文本颜色 */
        cursor: pointer;
        background: url(~@/assets/websit/img/backtop.png);
        background-size: 100% 100%;
        // padding: 10px;
        //border-radius: 5px;
    }
    // .page-component__scroll{
    //   overflow: hidden;
    //   overflow-y: auto;
    // }
    #myBtn:hover {
        background-color: #1b92fb;
        color: white; /* 文本颜色 */
    }
    a {
        color: -webkit-link;
        cursor: pointer;
        /* text-decoration: underline; */
    }
    .w1000{
        position: relative;
    }
    .w500{
        margin: 50px auto 0;
        width: 500px;
    }
    .footer_copy{
        padding-top: 10px;
    }

    .footer_wrap{
        overflow: hidden;
    }
    .foot_left{
        float: left;
        margin-top: 10px;
    }
    .foot_left1{
        width: 250px;
    }
    .foot_left2{
        width: 480px;
        padding-left: 30px;
    }
    .foot_right{
        margin-top: 10px;
        float: left;
        width:300px
    }
    .foot_left .tit {
        color: #b9c2c9;
        font-size: 16px;
        margin: 5px 0 5px;
    }
    .foot_left3{
        width: 400px
    }
    .foot_left p a {
        color: #b9c2c9;
        padding-right: 12px;
        font-size: 13px;
    }
    .foot_right .tit {
        color: #b9c2c9;
        font-size: 16px;
        margin: 5px 0 5px;
    }
    .foot_right p a {
        color: #b9c2c9;
        padding-right: 42px;
        font-size: 13px;
    }
    .footer_wrap .footer-b p {
        text-align: center;
        margin-top: 18px;
    }
    .footer_wrap p {
        color: #b9c2c9;
        font-family: "新宋体";
        font-size: 12px;
        line-height: 24px;
    }

    *, *:before, *:after {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }
    .div-erweima{
      width: 158px;
      height: 208px;
      background: url(~@/assets/websit/img/saomaerweima.png);
      background-size: 100% 100%;
      position: fixed;
      top: 391px;
      right: 30px;
    }
</style>
